//忘记密码
<template>
  <div class="repwd">
      <b-container>
          <div class="r-wapper">
              <div class="wapper">

                  <div class="form-title">
                      <p>{{$t('w_zhdlmm')}}</p>
                  </div>

                  <div class="form-progress">
                      <!-- <div class="active">1.填写账号</div> -->
                      <div :class="{active:isActive==0}">1.{{$t('w_sfyz')}}</div>
                      <div :class="{active:isActive==1}">2.{{$t('w_szxmm')}}</div>
                      <div :class="{active:isActive==2}">3.{{$t('w_czmmcg')}}</div>
                  </div>

                <!-- 步骤1 -->
                <div v-show="isActive==0" >
                  
                  <div class="form-tab">
                    <b-input-group>
                        <b-input-group-addon class="input-icon bu_chong">
                            <span class="ziti">请输入账号</span>
                            <!-- <img src="../../assets/img/icon-phone.png" alt=""> -->
                        </b-input-group-addon>
                        <b-form-input v-model="account" :placeholder="$t('w_sjhyx')" class="bu_chong"></b-form-input>
                    </b-input-group>
                    <div class="tips-line" v-if="!existsPhone" :style="{color:'red'}">{{$t('r_gsjhwzc')}}</div>
                </div>

                <!-- <div class="form-tab">
                    <b-input-group>
                        <b-input-group-addon class="input-icon">
                            <img src="../../assets/img/icon-imgcode.png" alt="">
                        </b-input-group-addon>
                        <b-form-input placeholder="请输入图形验证码"></b-form-input>
                    </b-input-group>
                    <div class="img-code">
                        <img src="../../assets/img/pic.jpg" alt="">
                    </div>
                </div> -->

                <div class="form-tab" >
                        <b-input-group>
                            <b-input-group-addon class="input-icon bu_chong">
                                <span class="ziti">请输入验证码</span>
                                <!-- <img src="../../assets/img/icon-phonecode.png" alt=""> -->
                            </b-input-group-addon>
                            <b-form-input v-model="mgsCode" :placeholder="$t('w_qsryzm')" class="bu_chong"></b-form-input>
                        </b-input-group>
                        <div class="code-right">
                            <button @click="currentGetCode" :disabled="ifDisabled" variant="outline-secondary" class="apcdefg" style="">{{btnText}}</button>
                        </div>
                    </div>

                <div class="form-tab">
                    <button :disabled="once" @click="step_one" class="form-tab-btn" variant="success">{{$t('w_xyb')}}</button>
                </div>

                </div>

                <!-- 步骤2 -->
                <!-- <div v-show="false">

                    <div class="show-phone-tips">
                        <p>短信驗證碼已發送至：1812****2587</p>
                    </div>

                    <div class="form-tab">
                        <b-input-group>
                            <b-input-group-addon class="input-icon">
                                <img src="../../assets/img/icon-phonecode.png" alt="">
                            </b-input-group-addon>
                            <b-form-input placeholder="请输入验证码"></b-form-input>
                        </b-input-group>
                        <div class="code-right">
                            <b-button variant="outline-secondary">获取验证码</b-button>
                        </div>
                    </div>

                    <div class="form-tab">
                        <b-button class="form-tab-btn" variant="success">下一步</b-button>
                    </div>

                </div> -->
                
                <!-- 步骤2 -->
                <div v-show="isActive==1">
                    <div class="form-tab">
                        <b-input-group>
                            <b-input-group-addon class="input-icon bu_chong">
                                <!-- <img src="../../assets/img/icon-pwd.png" alt=""> -->
                                <span class="ziti">请输入新的密码</span>
                            </b-input-group-addon>
                            <b-form-input type="password" v-model="password_1" :placeholder="$t('w_qsrdlmm')" class="bu_chong"></b-form-input>
                        </b-input-group>
                    </div>

                    <div class="form-tab">
                        <b-input-group>
                            <b-input-group-addon class="input-icon bu_chong">
                                <!-- <img src="../../assets/img/icon-pwd.png" alt=""> -->
                                <span class="ziti">请重复新的密码</span>
                            </b-input-group-addon>
                            <b-form-input type="password" v-model="password_2" :placeholder="$t('w_qcxsrdlmm')" class="bu_chong"></b-form-input>
                        </b-input-group>
                    </div>

                     <div class="form-tab">
                        <b-button @click="step_two" :disabled="once" class="form-tab-btn" variant="success">{{$t('w_qrxg')}}</b-button>
                    </div>

                </div>

                <!-- 步骤3 -->
                <div v-show="isActive==2">

                    <div class="form-success-pic">
                        <img src="../../assets/img/pwd-success.png" alt="">
                    </div>

                    <div class="show-phone-tips">
                        <p>{{$t('w_gxncgxgdlmm')}}</p>
                    </div>

                    <div class="form-tab">
                        <b-button @click="gotoRoute('/login')" class="form-tab-btn" variant="success">{{$t('w_qdl')}}</b-button>
                    </div>

                </div>

              </div>
          </div>
      </b-container>
    </div>
</template>

<script>
import mixins from "../../assets/js/mixin";
import { isPhoneNum, isEmail } from "../../assets/js/common";
export default {
  mixins: [mixins],
  data() {
    return {
      msg: "忘记密码",

      isActive: 0, // 步骤

      ifDisabled: false,
      btnText: this.$t('w_hqyzm'),
      timer: null,

      account: "",
      mgsCode: "",

      password_1: "",
      password_2: "",

      once:false,  // 点击一次

      existsPhone:true,
    };
  },
  methods: {
    currentGetCode() {
      if (this.account == "") {
        this.$swal(this.$t('w_zhbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      if (isPhoneNum(this.account)) {
          //手机号
          if (!this.existsPhone) {
              return false;
          }
        this.getPhoneCode(this.account).then(res => {
          if (res.data.code == "001") {
            this.countdown();
          }
        });
      }else if (isEmail(this.account)) {
          //邮箱号
        //   this.$http.get('/nb-web/api/system/sendMail',{
        //       params:{account:this.account, }
        //   }).then(res=>{
        //     if (res.data.code == "001") {
        //         this.countdown();
        //     }else{
        //         this.$swal(res.data.msg)
        //     }
        //   })
         this.getemailCode(this.account).then(res => {
          if (res.data.code == "001") {
            this.countdown();
          }})
      } else {
          this.$swal(this.$t('w_gsyw'),{
					icon:'/static/img/tan_chuang.png'
				})
      }
    },
    passwordTesting() {
      // 验证密码
      if (this.password_1 == "") {
        this.$swal(this.$t('w_mmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      if (!/^[A-Za-z0-9]\w{5,15}$/.test(this.password_1)) {
        this.$swal(this.$t('w_mmbhszdxxzm'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      if (this.password_1 != this.password_2) {
        this.$swal(this.$t('w_cfsrdmmbyz'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      return true;
    },
    step_one(){
        // 身份验证
        if (this.account == '') {
            this.$swal(this.$t('w_zhbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
            return false;
        }
        if (this.mgsCode == '') {
            this.$swal(this.$t('w_yzmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
            return false
        }
        this.once = true;
        this.$http.post('/nb-web/api/user/authenticate',{
            account:this.account,
            msgCode:this.mgsCode,
        }).then(res=>{
            this.once = false;
            if (res.data.code == '001') {
                this.isActive = 1;  // 步骤2   重置密码
            }else{
                this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				})
            }
        })
    },
    step_two(){
        //重置密码
        if (!this.passwordTesting()) {
            return false;
        }
        this.getPublicKey().then(key=>{
            let encrypt = this.$JSEncrypt;
                encrypt.setPublicKey(key);
            this.once = true;
            this.$http.post('/nb-web/api/user/reset/password',{
                account:this.account,
                newPassword:encrypt.encrypt(this.password_1)
            }).then(res=>{
                this.once = false;
                if (res.data.code == '001') {
                    this.isActive = 2; //重置成功   步骤3
                } else {
                    this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				})
                }
            })
        })
    }
  },
  created() {},
  mounted(){
      
  },
  watch:{
      account(newval){
          this.existsPhone = true;
          if (isPhoneNum(newval)) {
            this.$http.post('/nb-web/api/user/exists',{
                account:newval
            }).then(res=>{
                if (res.data.code == '001') {
                   this.existsPhone = true; // 已注册手机号
                }else{
                   this.existsPhone = false; // 未注册手机号
                }
            })  
          }   
      },
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/common.scss";

.nav_bg{
   background: #0f214a!important;
}
.container{
    width: 100%;
    height:100%;
    
}
.repwd{
    background:url('../../assets/img/zhu_ce_ye_bg.png') no-repeat;
}
.r-wapper{
    padding: 0;
    margin-left:50%;
    padding-top:120px;
    
}
.wapper{
    width: 588px;
    margin-left:-32%;
}
.bu_chong{
   border:none;
//    border-bottom:2px solid #c3cde4;
   width:100%;
   font-size: 12px;
   background-color:transparent;
   outline:none!important;
}
.code-right{
    margin-top:36px;
}
.form-control{
       border-bottom: 2px solid rgb(195, 205, 228);
       width: 100%!important;
       outline: none!important;
        box-shadow: 0;
           border-bottom-right-radius: 0;
}
.form-control:focus{
    border-bottom: 2px solid rgb(195, 205, 228);
    box-shadow: none!important;
}
.ziti{
    font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #1F3F87;
        letter-spacing: 0;
}
.repwd {
    height:650px;
    width: 100%;
  .form-title {
    margin-bottom: 30px;
    p {
      text-align: center;
      font-size: 24px;
      color: #333333;
    }
  }
  .form-progress {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    > div {
      font-size: 12px;
      color: #333333;
      position: relative;
      line-height: 16px;
      & + div:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-left: 7px solid #2d6df0;
        border-bottom: 5px solid transparent;
        position: absolute;
        top: 3px;
        left: -25px;
      }
      &.active {
        color: #2d6df0;
        border-bottom: 1px solid #2d6df0;
      }
    }
  }

  // 步骤2
  .show-phone-tips {
    margin-bottom: 15px;
    margin-top: 30px;
    p {
      color: #666;
      font-size: 14px;
      text-align: center;
      font-weight: 700;
    }
  }
  .form-success-pic {
    width: 100%;
    margin-top: 20px;
    img {
      margin: 0 auto;
    }
  }
}
.apcdefg{
 height: 100%;
    border-radius: 6px;
    border: 1px solid #99A7C8;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
}
.form-tab-btn{
    color:#fff;
}
</style>


